/**
 * ======================================
 * 辖区管理
 * author: SKY-D
 * file: index.vue
 * date: 2022/6/12 14:50
 * ======================================
 */
<template>
  <page>
    <div slot="other">
      <!--    通知-->
      <div v-if="false" class="notify">
        <el-alert
          v-if="notify === 'normal'"
          title="状态良好"
          type="success"
          description="管辖街区内没有异常"
          :closable="false"
          show-icon
        />
        <el-alert
          v-if="notify === 'warning'"
          title="重要通知！"
          type="warning"
          description="管辖街区内发生异常！"
          :closable="false"
          show-icon
        />
      </div>
      <!--    标题-->
      <div class="title">
        <div class="h1">实时数据</div>
        <div class="time">{{ time }}</div>
      </div>
    </div>
    <!--    功能-->
    <!--    查询条件-->
    <el-row slot="where">
      <el-col :span="24" class="k-text-left k-lh-2-2">
        <el-radio-group v-model="status" class=" k-mr-10" @change="changeType">
          <el-radio-button label="1">实时数据</el-radio-button>
          <el-radio-button label="2">只看异常</el-radio-button>
        </el-radio-group>
        <span>姓名/身份证:</span>
        <el-input v-model="WHERE.search" class="k-width-150-p k-mr-10" placeholder="姓名/身份证" />
        <span>楼宇:   </span>
        <el-input v-model="WHERE.building_name" class="k-width-150-p k-mr-10" placeholder="楼宇" />
        <span>时间:</span>
        <el-date-picker
          v-model="WHERE.start_time"
          class="k-width-200-p k-mr-10"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始"
        />
        <el-date-picker
          v-model="WHERE.end_time"
          class="k-width-200-p k-mr-10"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束"
        />

        <el-button type="primary" @click="_search">查询</el-button>
        <el-button type="primary" @click="_reset">重置</el-button>
        <el-button type="primary" @click="handleDownload">下载</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <el-table
      slot="table"
      ref="tb"
      v-loading="LOADING"
      :data="CLASS_TABLE_DATA"
      :size="SIZE"
      border
      :height="LIST_HEIGHT"
      style="width: 100%"
      @selection-change="_handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="(item) in setting">
        <el-table-column
          v-if="item.key === 'action'"
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <el-button @click="handleAssociation(scope.row)">展开关联</el-button>
            <el-button @click="handleReason(scope.row)">异常原因</el-button>
            <el-button @click="handleRelieve(scope.row)">解除异常</el-button>
            <el-button @click="handleInfo(scope.row)">个人资料</el-button>
          </template>

        </el-table-column>
        <el-table-column
          v-else
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
        />
      </template>
    </el-table>
    <!--    分页-->
    <pagination slot="pagination" />
    <!--    弹窗-->
    <template slot="modal">
      <form-modal :visible.sync="FORM_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" />
      <user-info-modal :data="detailId" :visible.sync="detailVisible" />
      <association :visible.sync="associationVisible" :idcard="trackIdCard" :name="trackUserName" />
    </template>
  </page>
</template>

<script>
import list from '@/list'
import WhereaboutsClass from '@/models/whereabouts-class'
import { getList, update } from '@/api/whereabouts'
import formModal from './components/form'
import userInfoModal from '@/views/company/list/components/person/scan'
import association from '@/views/warning/list/components/track'
import { streetOptions } from '@/list/data'
import moment from 'moment'
const whereaboutsClass = new WhereaboutsClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { formModal, userInfoModal, association },
  mixins: [list],
  data() {
    return {
      time: '----年--月--日 --时--分--秒',
      timer: '',
      notify: 'warning',
      streetOptions,
      setting: whereaboutsClass.list(),
      status: '1',
      WHERE: {
        status: '1',
        search: '',
        building_name: '',
        start_time: '',
        end_time: ''
      },
      detailVisible: false,
      detailId: 0,
      associationVisible: false,
      associationData: {},
      trackIdCard: 0,
      trackUserName: ''
    }
  },
  created() {
    this.LIST_API = getList
  },
  mounted() {
    this.setTime()
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    _setClass() {
      console.log('[mixin][list]设置类')
      const list = []
      this.TABLE_DATA.forEach(v => {
        const item = new WhereaboutsClass(v)
        list.push(item)
      })
      this.CLASS_TABLE_DATA = list
    },
    setTime() {
      this.timer = setInterval(() => {
        this.time = moment().format('yyyy年MM月DD日 HH时mm分ss秒')
      }, 1000)
    },
    changeType(item) {
      console.log('选择类型', item)
      this.WHERE.status = item
      this._search()
    },
    handleCreate() {
      console.log('添加')
      this.FORM_TYPE = 'create'
      this.FORM_VISIBLE = true
    },
    handleDownload() {
      console.log('下载')
      this.$notify.info('获取数据中。。。')
    },
    handleEdit(item) {
      console.log('编辑', item)
      this.FORM_TYPE = 'edit'
      this.FORM_VISIBLE = true
    },
    handleAssociation(item) {
      console.log('展开关联', item)
      this.associationVisible = true
      this.trackIdCard = item.idCard
      this.trackUserName = item.name
    },
    handleReason(item) {
      console.log('异常原因', item)
      this.$alert(item.remark || '无', '异常原因', {
        confirmButtonText: '确定',
        callback: action => {
          console.log('点击了', action)
        }
      })
    },
    handleRelieve(item) {
      console.log('解除异常', item)
      this.$confirm('确认解除异常？')
        .then(_ => {
          this.$prompt('请输入解除备注', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            console.log('输入', value)
            update({
              id: item.id,
              status: 1,
              note: value
            }).then(res => {
              console.log('解除结果', res)
              this._showSuccess('解除异常成功')
            })
          })
        })
        .catch(_ => {})
    },
    handleInfo(item) {
      console.log('个人资料', item)
      this.detailId = item.UID
      this.detailVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
  margin-top: 20px;
  .h1{
    font-weight: bold;
    font-size: 27px;
    line-height: 40px;
  }
  .time{
    line-height: 30px;
  }
}
</style>
